<template>
  <div id="registered">
    <!-- 头部 -->
    <div class="header">
      <span class="hh1"></span>
      <span class="hh2">京东注册</span>
    </div>
    <!-- 输入内容 -->
    <div class="contain">
      <div class="cc">
        <div class="cc1">
          <label for class="lb">
            <span>+86</span>
            <i></i>
          </label>
          <input type="text" placeholder="请输入手机号" class="pp">
        </div>
        <div class="cc2">
          <div>
            <img src="../image/registered/init.gif" alt>
            <span>点击完成验证</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 协议 -->
    <div class="privacy-container">
      <div class="privacy-contain">
        <p class="privacy-title">注册协议及隐私政策</p>
        <hr>
        <div class="privacy">
          <p>
            在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
            <span>请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span>
          </p>
          <p class="regulations1">
            <a href>《京东用户注册协议》</a>
          </p>
          <p class="regulations2">
            <a href>《京东隐私政策》</a>
          </p>
          <p class="regulations3">
            <a href>《订单共享与安全》</a>
          </p>
          <p>
            <span>【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。</span>
            如您对以上协议内容有任何疑问，您可随时与京东客服联系。
          </p>
        </div>
        <div class="privacy-btn">
          <p class="agree">
            <span>
              点击同意即表示您已阅读并同意
              <a href>《京东用户注册协议》</a>与
              <a href>《京东隐私政策》</a>
              并将您的订单信息共享给为完成此订单所必须的第三方合作方。关于
              <a href>《订单共享与安全》</a>
            </span>
          </p>
          <div class="btn">
            <a href class="a1">不同意</a>
            <a href class="a2">同意</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='scss' scoped>
* {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
#registered {
  background: #eee;
  .header {
    background-color: #f9f9f9;
    color: #616161;
    font-size: 34px;
    border-bottom: 1px solid #bbb;
    height: 88px;
    line-height: 88px;
    text-align: center;
    position: relative;
    .hh1 {
      background: url(../image/registered/a3a248f4a949c14c2cb4fb9ac656f1f5.png)
        no-repeat;
      background-position: -9px -127px;
      background-size:44px 500px;
      width: 44px;
      height: 44px;
      display: inline-block;
      position: absolute;
      left: 30px;
      top: 22px;
    }
  }
  .contain {
    padding: 30px;
    .cc {
      margin: 0px 116px;
      .cc1 {
        padding: 0px 10px;
        margin-top: 30px;
        background-color: #fff;
        line-height: 90px;
        width: auto;
        .lb {
          width: 124px;
          text-align: right;
          font-size: 28px;
          position: absolute;
          i {
            width: 0px;
            height: 0px;
            display: inline-block;
            padding-top: 2px;
            border-top: 10px solid #ababab;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin: 0px 14px 0px 4px;
          }
        }
        .pp {
          padding: 2px 60px 2px 120px;
          outline: 0;
          border: 0;
          display: inline-block;
          width: 258px;
          font-size: 28px;
        }
      }
      .cc2 {
        margin-top: 30px;
        div {
          height: 90px;
          //line-height:90px;
          text-align: left;
          font-size: 28px;
          border: 1px solid #409eff;
          border-radius: 4px;
          background-color: #fff;
          img {
            height: 44px;
            padding: 0 18px;
            margin-top: 21px;
            position: absolute;
          }
          span {
            display: inline-block;
            margin: 0 80px;
            color: #409eff;
            line-height: 90px;
          }
        }
      }
    }
  }
  .privacy-container {
    width: 100%;
    height: 100%;
    //position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: PingFangSC-Regular;
    .privacy-contain {
      padding: 0px 20px;
      background: #f8f8f8;
      border-radius: 6px;
      .privacy-title {
        width: 100%;
        font-weight: 700;
        font-size: 36px;
        text-align: center;
        padding: 25px 0px;
      }
      .privacy {
        font-size: 26px;
        color: #000;
        text-align: left;
        height: 355px;
        padding-top: 25px;
        overflow-y: scroll;
        overflow-x: hidden;
        p {
          font-size: 26px;
          line-height: 36px;
          span {
            font-weight: 700;
            text-decoration: underline;
          }
        }
        a {
          color: #000;
        }
        .regulations1 {
          margin-top: 20px;
        }
        .regulations3 {
          margin-bottom: 20px;
        }
      }
      .privacy-btn {
        background: #f8f8f8;
        .agree {
          text-align: left;
          font-size: 26px;
          padding: 20px 10px 0 0;
          color: #000;
          span {
            font-weight: 700;
            font-size: 26px;
            line-height: 36px;
            a {
              color: red;
              text-decoration: underline;
            }
          }
        }
        .btn {
          height: 110px;
          display: flex;
          justify-content: space-between;
          a {
            display: block;
            border: 1px solid#d7d7d7;
            text-align: center;
            font-size: 32px;
            width: 40%;
            line-height: 78px;
            border-radius: 5px;
          }
          .a1 {
            margin: 16px 0px 16px 20px;
            background-color: #fff;
            color: #000;
          }
          .a2 {
            margin: 16px 20px 16px 0px;
            background: red;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

